Hilfeindex

Hilfe zum CSS-Maker

Wenn Sie sich fragen, wozu man den CSS-Maker gebrauchen kann bzw. wie man ihn bedient, sind Sie hier genau richtig. Sie programmieren des öfteren HTML-Seiten, wissen von der Existenz von Cascading Style Sheets (CSS), nutzen es aber immer noch nicht ? Dann werden Sie mit diesem Programm im Hand-umdrehen ihr eigenes Design entwickeln und das Erscheinungsbild Ihrer Homepage dynamisch für alle oder auch einzelne Seiten verändern können. Sie können alle vorhandenen Html-Elemente formatieren und auch eigene Klassen erstellen, die Sie wiederum den Html-Elementen zuweisen können. Mit Einführung der Version 1.3.5 ist es auch möglich Individualformate zu erstellen.

Alles in allem werden Sie sehen, dass Sie mit wenigen Mausklicks das Aussehen Ihrer Internet-Seiten gewaltig verändern können. Natürlich helfe ich Ihnen auch beim Einbinden der CSS-Datei.

Diese Hilfe ist wie folgt strukturiert:

  • Informationen zu CSS
    • Welche Eigenschaften können zugewiesen werden?

  • Informationen zur Anwendung
    • Zum Hauptformular
      • Programm-Einstellungen
      • Optionen
      • Short-Cuts
    • Zum Editor
      • Individualformate
      • Pseudoformate
    • Zum Scrollbar-Editor
    • Zur Vorschau
    • Zum Inserter
    • Zum Compiler
    • Zum Kopierer

  • Kompatibilität der Versionen
  • Zur Mehrsprachigkeit
  • Kritik


Leistungsdaten

Zuweisbare Eigenschaften

Derzeit können Sie folgende Eigenschaften zuweisen, bzw. editieren:

    Farben

    • Textfarbe (color)
    • Rahmenfarbe (border-color)
    • Hintergrundfarbe (background-color)

    Schriften

    • Schriftart (font-family)
    • Schriftgrösse (font-height)
    • Textausrichtung (text-align)
    • Textdekoration (decoration)
    • Textstyle (font-style)
    • Textgewicht (font-weight)

    Abstände

    • Innenabstand global (Padding)
    • Einzeln von links
    • Einzeln von rechts
    • Einzeln von oben
    • Einzeln von unten
    • Aussenabstand global (Margin)
    • Einzeln von links
    • Einzeln von rechts
    • Einzeln von oben
    • Einzeln von unten

    Rahmen

    • Rahmenstärke (border-width)
    • Rahmenstyle (boder-style)

    Gesondertes

    • linienHöhe (line-height)
    • Texttransformationen (text-transform)
    • vertikale Ausrichtung (vertical-align)
    • horizontale Ausrichtung
    • Objektbreite (width)
    • Objekthöhe (height)
    • Textumfluss (float)
    • Fortsetzung nach Textumfluss (clear)
    • Anzeige (display)
    • Anzeigerichtung (direction)
    • Mausanzeige (cursor)

    Hintergrundbild

    • Hintergrundbild (background-image)
    • Hintergrundbild fixieren (background-image-attachment)
    • Hintergrundbild-Wiederholung (background-image-repeat)
    • Hintergrundbild-Position (background-image-position)

    Listenformatierung

    • Listengrafik (list-style-image)
    • Listentyp (list-style-type)
    • Listenposition (list-style-position)


Hauptformular

Das Hauptformular ist leicht zu überschauen. Links befinden sich die Tags und rechts die Klassen. Die Tags sind in dieser Version noch begrenzt und vorgegeben. Sollte hier Bedarf an Veränderungen sein, werde ich ein Editieren dieser momentanen Liste ermöglichen. Die Klassen sind eigenständig. Den Namen und die dazugehörigen Eigenschaften legen Sie selbst fest.

Um ein Element oder eine Klasse in seinen Eigenschaften definieren zu können, muss man selbiges hinzufügen. Dafür einfach den Add-Button betätigen und schon ist´s passiert.

Nun kann man jedes Element/Klasse, die hinzugefügt worden sind, einfach anklicken und per Edit-Button oder per F5-Taste in den Editier-Modus verfrachten.

Will man ein Element/Klasse löschen, ist dass natürlich auch möglich. Allerdings verliert man dann alle gemachten Einstellungen. Aber darauf weisst Sie das Program dann auch nochmal hin. Wenn Sie eine erstellte Klasse oder XML-Element ganz und gar aus Deinem Projekt entfernen wollen, selektieren Sie die Klasse, das Element und drücken den Delete-Button rechts unten. Auch hierbei gehen sämtliche Informationen verloren.

Da die Scrollbar-Eigenschaften dem Html-Element "Body" zugewiesen werden, ist es erforderlich, dieses Element hinzufügen. Da man das auch mal vergessen kann, ist realisiert, dass dies automatisch hinzugefügt wird.

Wichtig: Die Scrollbar-Befehle benötigen mindestens folgende Browser ==> InternetExplorer 5.xx


Optionen

    Unter Optionen sind die Projektbezogenen Einstellungen vorzunehmen.

    Man kann hier bereits den HTML-Hauptpfad vorgeben, der dann automatisch vom Compiler und vom Inserter übernommen wird. Das ist bei mehreren Projekten mit verschiedenen Layouts nützlich.

    Ausserdem kann man Projektbezogene Anmerkungen machen. Zum Beispiel aufschreiben, was noch zu erledigen ist, wo man mit der Arbeit aufgehört hat uvm.

    Will man seine Links (Verweise auf andere Seiten) modern gestalten, kann man den Haken für "A-Tag mit Pseudoformaten nutzen" aktivieren. Dadurch wird beim Editieren des A-Elements ein anderes Formular aufgerufen, mit dem die einzelnen Pseudoformate editiert werden können.

    Man muss dieses Formular aber nicht unbedingt benutzen, wenn man Pseudoformate nutzen will. Für die unter Ihnen, die sich damit schon auskennen, gibt es die Individualformate, in denen man a:link usw. erstellen kann und dann per Editor die Eigenschaften zuweisen kann.

    Mein TIPP: Erstellen Sie alle Pseudoformate und editieren Sie vorerst nur das Element a:active. Anschliessend öffnen Sie das Kopiertool und kopieren die dort gemachten Eigenschaften zu den restlichen Pseudoformaten. Dann brauchen Sie eigentlich nur noch die Kleinigkeiten zu modifizieren.(z.B. decoration für die Unterstreichung bei a:hover)

    Hier kann man die Maßeinheit auswählen. Diese ist dann auf das Projekt bezogen für alle Einstellungen, welche eine numerische Angabe mit sich bringt bezogen und sogar geändert werden, wenn schon Einstellungen vorgenommen wurden. Alle numerischen Werte werden automatisch geupdatet.


Einstellungen

    Unter Einstellungen sind die Programmbezogenen Einstellungen vorzunehmen.

  • Die erste Einstellung aktiviert man, wenn man direkt nach dem Erzeugen eines neuen Projektes die Projektoptionen einstellen will. Dadurch wird jedes mal, wenn man ein neues Projekt erzeugt das Optionsformular aufgerufen.

  • Wenn man auch für bereits erstellte Projekte die gemachten Optionen nach dem Öffnen des Projektes einsehen will, aktiviert man auch die zweite Abfrage.

  • Mit dem dritten Hacken stellt man sicher, dass der Pfad, den man in den Projekt-Optionen gewählt hat auch beim Inserter und dem Codemaker übernommen wird. Meist ist das der Fall. Deshalb liefer ich das Programm in angehaktem Zustand aus.

  • Die 2 letzten Einstellungen sind meiner Meinung nach selbsterklärend.


Tastaturbefehle

    Hier können Sie die Tastaturbefehle nachlesen

    Strg + N | neues Projekt
Strg + O | Projekt öffnen
Strg + S | Projekt speichern
Alt + F4 | Programm beenden
F1 | Hilfe starten
F4 | Eigenschaften kopieren
F5 | Editor öffnen
F6 | CSS-Datei erzeugen
F9 | Vorschau öffnen
Strg + I | Inserter öffnen


Editor

Editor (F5)

Links oben wird der Name des ausgwählten Elementes angezeigt. Somit ist man immer im Bild, was man gerade bearbeitet/editiert.

Auf der linke Seite des Editors macht man grundsätzlich alle Einstellungen.

Auf der rechten Seite befindet sich eine Sofort-Vorschau, eine Quellcode-Anzeige und eine kleine extra-Minihilfe, welche ich wahrscheinlich noch erweitere oder entferne.

Wenn man die gemachten Veränderungen nicht übernehmen will, drückt man den Abbrechen-Button. Dies kann vorkommen, wenn man ein bereits editiertes Element nur ein wenig modifizieren will und einem aber die gemachten Einstellungen nicht zusagen.

Will man alle zugewiesenen Einstellungen eines Elementes löschen, weil man einfach von vorn beginnen will, drückt man den Zurücksetzen-Button.

Wenn man mit seinen Einstellungen fertig ist, drückt man den Übernehmen-Button. Erst dann bekommt das Programm alle Eigenschaften des Elementes komplett mitgeteilt und legt diese ab.


Hilfe zum CSS-Maker 1.3

Individualformate

    Mit diesem Formular können Sie verschiedene Individualformate erstellen und anschliessend mit dem Editor formatieren.

  • Einfach
    Hier kann man zum einen ein einfaches Individualformat erstellen, indem man einfach in das Feld einen Namen eingibt. Drückt man nun den Button "Erstellen", wird das ID-Format erstellt und wenn Sie nun noch dieses Format anklicken und den "Verwenden"-Button betätigen wird diese ID in die rechte Liste eingefügt und steht von nun an zum editieren zur Verfügung.

    Wenn Sie nun zum Beispiel ein Individualformat einem bestimmten Element zuweisen wollen, brauchen Sie nur ein HTML-Element aus der Liste auszuwählen und dann entweder eine Klasse oder ein Individualformat auszuwählen. Wie Sie sehen, wird dann in dem unteren Teil automatisch das jeweilige Element erzeugt. Auch diesen können Sie durch den "Verwenden"-Button hinzufügen.
  • Kontext
    Wenn Sie innerhalb eines Elementes ein anderes immer auf der gleichen Weise formatieren wollen, wählen Sie diese Verschachtelung.
  • Knoten Diese Formatierung wählen Sie, wenn Sie eine Verschachtelung benötigen, bei der das 2. Element mindestens 2 Ebenen tiefer ist. Also würde div*li nur dann funzen, wenn z.B. <div><ul><li> im HTML-Code notiert wird.
  • Kindelement Diese Formatierung wählen Sie, wenn Sie eine Verschachtelung benötigen, bei der das 2. Element sich direkt unter dem 1. Element ist. Also würde div>li nur dann funzen, wenn z.B. <div><li> im HTML-Code notiert wird.
  • Erweitert
    Unter dieser Rubrik können Sie den HTML-Elementen Klassen und Individualformate zuweisen und auch Pseudo-Klassen und Pseudo-Elemente.
    • Details bei Self-Html


Editor (F5)

    Pseudoformate

    Um die Verweise so zu gestalten, dass Sie anders, besser und aktiver aussehen, müssen Sie in den Optionen die Checkbox für Pseudoformate aktivieren. Sollten Sie das nicht getan haben, öffnet sich das normale Editierfenster. Dort können Sie die schon beschriebenen Einstellungen vornehmen.

    Ganz links sehen Sie die Namen der möglichen Einstellungen. Gleich rechts daneben können die Einstellungen vorgenommen werden. In dem Kasten "Auswahl", wählen Sie das gewünschte Pseudoformat aus. Danach werden alle Einstellungen, die Sie vornehmen diesem Pseudoformat zugewiesen. Die 4 gleichen Kästen zeigen die getätigten Einstellungen an.

    Der sich unten befindliche grüne Pfeil und die Checkboxen können dazu benutzt werden die bei A:Link gemachten Angaben zu den anderen Pseudoformaten zu kopieren. Dabei wird die aktuelle Einstellung überall dorthin kopiert, wo die Checkbox angehakt wurde.

    Ganz rechts habe ich ein Vorschaufenster eingerichtet, in dem Sie den Link in Echtzeit als HTML-Seite als Vorschau erhalten und eine Seite, wo der Quelltext zu sehen ist und eine kleine Page mit Tipps.


Scrollbar

Scrollbar-Editor

Um die Scrollbar farblich dem eigenen Layout anzupassen brauchen Sie einfach nur die einzelnen Buttons zu drücken. Das Ergebnis sehen Sie sofort nach dem Bestätigen der ausgewählten Farbe.

Wenn Sie den kompletten Code sehen wollen, klicken Sie einfach auf den Tab-Reiter rechts oben. Dieser zeigt den aktuell verwendeten HTML-Code an. Wenn Sie sich mit dem Einbinden in Html-Dateien auskennen, können Sie ihn von dort einfach kopieren und in die gewünschte Datei einfügen. Ansonsten bedienen Sie sich einfach des Inserters.

Wenn Ihnen Ihre Veränderungen nicht gefallen, Resetest Sie einfach alles und fangen von vorn an. Sie können aber auch beim Comipilieren des Codes den Scrollbar-Code abwählen, wenn Sie ihn nicht mit integrieren wollen.

Um zu sehen, wie sich nun Ihr Gesamtbild darstellt, können Sie sich nach dem "Übernehmen" der Daten per F9 die Vorschau Ihrer Formatierungen ansehen.


Tools

Tools des CSS-Maker


Compiler

Zuerst wählt man den Pfad, wo die neue Datei hingeschrieben wird. Dies sollte immer die oberste Location des Internet-Ordner sein. Meist ist das wie hier im Beispiel C:\Eigene Dateien\Internet\ .

In das Eingabe-Formular gibt man nun den gewüschten Namen der Datei ein. Wenn diese schon existieren sollte, wird diese überschrieben.

Als nächstes wählt man noch aus, ob man den Code für die Scrollbar mit in die CSS-Datei einbinden will oder nicht. Sollte man mit der Scrollbar noch nicht fertig sein, kann man diese auch später noch integrieren.

Dann nur noch den Compilieren-Button drücken und schon gehts los. Die Datei wird erstellt und in dem rechten Fenster wird Ihr Inhalt angezeigt.

Wenn Sie nun auch noch den Luxus geniessen wollen und diese Datei automatisch in Ihre Html-Dateien einbinden lassen wollen, rufen Sie einfach den Inserter (F9) auf.


Kopierer

Eigenschaften kopieren

Wie oft kommt es vor, dass man Elementen Eigenschaften zuweist, die eigentlich auch für andere Elemente geeignet sind. Wäre der CSS-Maker ein Texteditor, wäre es ein leichtes Gruppen zu erstellen, wie z.B. "Body,H1,H2". Dieser Gruppe würde man dann einfach alle möglichen Eigenschaften zuweisen.

Da der CSS-Maker aber für Anfänger im Bereich CSS und auch für faule Leute gedacht ist, wollte ich die Möglichkeit nicht in Betracht ziehen, da an diesem Punkt schon wieder Kenntnisse erforderlich sind. Was kann man nun mit dem Kopiertool anstellen. Ganz einfach: Sie haben dem Element: "button" bestimmte Eigenschaften zugewiesen, die Sie nun auch z.B. der Klasse ".klasse3" zuweisen wollen. Sie brauchen nur die jeweiligen Elementgruppen und die gewünschten Elemente auswählen und nach einem Knopfdruck ist alles erledigt. Bei der Zuweisung kann man auch gleich mehrere Elemente anwählen.

Die Hauptaufgabe war meiner Meinung nach die, dass ich sicherstellen wollte, dass man für die Pseudoformate z.B. "A#neu:hover" die Eigenschaften nur einmal zuweist, dann allen anderen die Eigenschaften rein kopiert und dann braucht man nur noch die Eigenschaft zu modifizieren, die anders sein soll.

Um zu sehen, wie sich nun Ihr Gesamtbild darstellt, können Sie sich nach dem "Übernehmen" der Daten per F9 die Vorschau Ihrer Formatierungen ansehen.


Vorschau

Vorschau (F9)

Durch Drücken der Taste F9 erscheint das Vorschau-Fenster. Links sind alle Tags unformatiert und rechts sind alle Tags (zumindest die, die Sie schon editiert haben) eingebunden und dem entsprechend formatiert.

Sollte die Vorschau mal nicht die aktuellste Version sein, reicht es eigentlich den Refresh-Button zu drücken.

Tritt keine Besserung ein, gibt es nur noch eine möglich Erklärung. Sie haben sich noch im Editiermodus befunden und Ihre Daten sind noch nicht an das Hauptformular übergeben worden.

Schliessen Sie also das Vorschaufenster und klicken Sie im Editfenster oder im Scrollbar-Editor auf "übernehmen" und rufen Sie die Vorschau erneut auf.

Wie zu sehen ist, befinden sich links unten 3 Pages zur Auswahl. Diese werden demnächst modifiziert, damit möglichst alle Tags in der Vorschau erscheinen. Ausserdem gibt es eine reine Elementseite, die nur die editierten Elemente anzeigt.

Achtung: Sollte Interesse daran bestehen, eine eigene Seite ins Vorschau-Fenster zu laden, um sehen zu können, wie sich die gemachten Einstellungen auswirken, werde ich dies demnächst ermöglichen.

Wichtig: Ich benötige also Ihr Feedback. -))


Inserter

Inserter (STRG+I)

Zuerst wählen Sie das Hauptverzeichnis Ihrer Internet-Datein an. Nun werden alle sich dort befindlichen Html-Dateien aufgelistet.

Sie haben nun die Möglichkeit diese manuell auszuwählen oder per Knopfdruck alle auf einmal zu selektieren bzw. zu deselektieren.

Alle angehakten Dateien, werden dann später der gewüschten Prozedur unterzogen.
Hier brauchen Sie einfach nur die gewünschte CSS-Datei auszuwählen.

Sollte siche diese Datei nicht in Ihrem obersten Html-Pfad befinden, wird Sie automatisch dorthin kopiert nachdem Sie den Insert-Button gedrückt haben.

Während des Insertierens wird die jeweilige Html-Datei in das Fenster geladen und bearbeitet. Die zuletzt bearbeitete Datei verbleibt in diesem Fenster, was für Sie aber nicht von Bedeutung sein soll.

Wichtig: Sollte in den ausgewählten Html-Dateien schon eine andere CSS-Datei eingebunden sein, so wird dieser Verweis gelöscht.
In der nächsten Ausgaben dieses Programmes wird eine Sicherung aller vorhandene Dateien angeboten werden.


Kompatibilität der Versionen

Dieses Thema bedarf meiner Meinung nach einer kurzen Information. Für alle die unter Ihnen, die noch eine ältere Version des CSS-Maker haben, zunächst die schlechte Nachricht. Die Projektdateien sind leider nicht kompatibel. Ich habe mich darauf konzentriert eine kleine Importfunktion für die Projektdateien des CSS-Maker der Version 1.3.7 einzubinden. Wenn also mit der neuen Version 1.4 eine ältere Projektdatei geöffnet werden soll, bekommen Sie nur eine Fehlermeldung, bzw. die Information, dass die Projektdatei importiert wird.

Wenn Sie eine Projektdatei von der Version 1.3.7 in die Version 1.4 importieren, können Sie diese Datei nicht mehr fehlerfrei mit dem CSS-Maker der Version 1.3.7 öffnen. Ich habe hierbei mein Bestes gegeben und hoffe, dass auch bei Ihnen keine Fehler oder Probleme auftreten. Sollte dies dennoch der Fall sein, bitte ich um eine kurze Info mit der Fehlerbeschreibung, damit ich das Porblem beheben kann.

Die Erklärung für dieses Wirr-War ist relativ einfach. Ich habe bei der Projektierung leider den kommenden Umfang dieses kleinen Tools unterschätzt und musste fast wöchentlich fehlende CSS-Eigenschaften implementieren. Dies sprengte jedes mal den Rahmen des Speichervorganges. Aus diesem Grund musste ich jedes mal die Speicher- und Ladeprozedur überarbeiten.

Für die kommenden Versionen werde ich aber sicherstellen, dass die Kompatibilität immer gewährleistet ist.

Danke für Ihr Verständnis.


Mehrsprachigkeit

Zur Mehrsprachigkeit

    Zur Zeit ist der CSS-Maker in 2 Sprachen verfügbar. Zum einen in Deutsch und zum anderen in Englisch. Für alle diejenigen, die helfen wollen, dieses Programm in noch mehr Sprachen zur Verfügung zu stellen, hier der Hinweis, das auf der Downloadpage eine Textdatei heruntergeladen werden kann, die man dann einfach nur übersetzn braucht.

    Leider ist die Hilfe derzeit noch nicht mehrsprachig. Auch diese werde ich als Textdatei zum Download zu Verfügung stellen, in der Hoffnung, dass sich auch hierfür Leute finden, die dies übersetzen.

    Ansonsten kann man die Sprache zu jedem Zeitpunkt modifizieren. Es kommt eigentlich zu keinen Problemen und ich hoffe, dass die Übersetzungen sinngemäss und verständlich sind. Alle die mitmachen und es wünschen, werden hier gern namentlich genannt. Da ich das Programm regelmässig weiterentwickle, sollten Sie auch kein Problem damit haben, dass ich ab und an mal eine zusätzliche Übersetzung brauche z.b. für die Hilfe oder ein neues Feature.

    Übersetzungen der Software
Deutsch: | Thomas Rudolph
Englisch: | Reiko Kretzschmar
Übersetzungen der Hilfe
Deutsch: | Thomas Rudolph


Kritik

Kontakt

Bitte ausfüllen und absenden
Wünsche:
Probleme:
Fehler:
Zufriedenheit:
Ihr Text:
E-Mail-Adresse:


Images

Bilder

Hier werden nur alle Bilder abgelegt, damit der Compiler den Weg zu Ihnen findet.


Inserter

Inserter (STRG+I)

    Vor- und Nachteile

    Tja es liegt ja eigentlich auf der Hand, wo die Unterschiede der verschiedenen Methoden des Einbindens von CSS-Code oder CSS-Dateien liegen Nichts desto trotz, kläre ich Sie hier kurz auf.

  • CSS-Code in der HTML-Datei
    Wenn Sie sich dafür entschieden haben, den kompletten Code in die jeweilige Internetseite einzubinden, haben Sie den Vorteil, total flexibel zu sein. Sie können praktisch jeder Seite eine neues Layout zuweisen. Allerdings ist das für eine Internetpräsenz mit vielen Seiten eher umständlich und mit viel Aufwand verbunden, jede Seite einzeln mit dem entsprechenden Code zu versehen.
  • CSS-Datei zentral einbinden
    Nun ich möchte nicht verhehlen, dass diese Methode mein Favorit ist. Sie erstellen einmal ein Layout für die ganze Page. Sie wünschen eine Änderung ? Kein Problem. Im Handumdrehen ist die geschehen und zwar für die ganze Internetpräsenz.